<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预定行程</title>
    <script src="asserts/js/jquery-3.6.0.js"></script>
    <script src="asserts/js/jquery.cookie.js"></script>
    <script src="asserts/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.4.1-dist/css/bootstrap-theme.css"/>
    <link rel="stylesheet" type="text/css" href="asserts/css/cloud.css"/>

    <style>

        .button {
            display: inline-block;
            border-radius: 7px;
            border: none;
            background: #1875FF;
            color: white;
            font-family: inherit;
            text-align: center;
            font-size: 13px;
            box-shadow: 0px 14px 56px -11px #1875FF;
            width: 15em;
            padding: 1em;
            transition: all 0.4s;
            cursor: pointer;

            margin-top: 30px;
        }

        .button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.4s;
        }

        .button span:after {
            content: ' for miao';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.7s;
        }

        .button:hover span {
            padding-right: 3.55em;
        }

        .button:hover span:after {
            opacity: 4;
            right: 0;
        }

        .zfb {

            border: 2px solid #adadad59;
            width: 250px;
            height: 60px;
            line-height: 56px;
            text-align: center;
            border-radius: 5px;
            margin: 20px;
        }

        .zfb:hover {
            background: rgba(255, 255, 255, 0.38);
        }

        .navbar-default {
            background-color: #ffffffcf;;
            border-color: #e7e7e7;
        }

        .navbar-default {
            background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45) 100%);
            background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45) 100%);
            background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.45)), to(rgba(255, 255, 255, 0.45)));
            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
            background-repeat: repeat-x;
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            border-radius: 0px;
            -webkit-box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 5px rgb(0 0 0 / 8%);
            box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 5px rgb(0 0 0 / 8%);
        }

        #card1 {
            background-color: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(13px);
            -webkit-backdrop-filter: blur(13px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
            -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
            border-radius: 7px;
            -webkit-border-radius: 7px;
            color: rgb(255, 255, 255);
            width: 900px;
            margin: 0 auto;
        }

        #wai {
            text-align: center;
        }

        #card2 {
            background-color: rgba(245, 245, 245, 0.58);
            /* backdrop-filter: blur(13px); */
            -webkit-backdrop-filter: blur(13px);
            /* border: 1px solid rgba(255, 255, 255, 0.18); */
            /* box-shadow: rgb(142 142 142 / 19%) 0px 6px 15px 0px; */
            /* -webkit-box-shadow: rgb(142 142 142 / 19%) 0px 6px 15px 0px; */
            border-radius: 5px;
            /* -webkit-border-radius: 7px; */
            /* color: rgb(255, 255, 255); */
            margin: 20px;
            height: 110px;
            text-align: left;
        }


    </style>
</head>
<body>


<div>
    <div class="frame">
        <div class="plane-container">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                 y="0px"
                 width="1131.53px" height="379.304px" viewBox="0 0 1131.53 379.304"
                 enable-background="new 0 0 1131.53 379.304"
                 xml:space="preserve" class="plane">
                    <polygon fill="#D8D8D8"
                             points="72.008,0 274.113,140.173 274.113,301.804 390.796,221.102 601.682,367.302 1131.53,0.223  "/>
                <polygon fill="#C4C4C3" points="1131.53,0.223 274.113,140.173 274.113,301.804 390.796,221.102   "/>
            </svg>

        </div>
    </div>
    <div class="clouds">

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud big front slowest">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud distant smaller">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud small slow">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud distant super-slow massive">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud slower">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

    </div>

</div>

<!--导航栏-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <img class="logo" style="margin-left: 30px;height: 30px;width: auto;margin-top: 10px;" src="asserts/img/logo.png"/>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a
                        style="margin-left: 40px;box-shadow: 0 3px 9px rgb(0 0 0 / 8%);    background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);"
                        href="#">购票<span class="sr-only">(current)</span></a></li>
                <li><a href="return.html">购票记录</a></li>

            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a id="weather" href="#">天气</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false" id="namee">{用户名}<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">个人信息</a></li>
                        <li><a id="signOutBtn" class="nav-link"  href="#">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div id="wai">
    <div id="card1">


        <form  class="form-inline" style="margin-top: 50px;" action="newTrips.html" method="get" id="ff">

            <div class="form-group">
                <label for="takeoff" style="color: #000;">出发城市</label>
                <select  class="form-control" id="takeoff" name="takeoff" style="width: 200px;">
                </select>
            </div>
            <div class="form-group" style="margin-left: 20px;">
                <label for="landing" style="color: #000;">到达城市</label>
                <select   class="form-control" id="landing" name="landing" style="width: 200px;">
                </select>
            </div><br><br>


            <div class="form-group">
                <label for="meeting" style="color: #000">出发日期</label>
                <input id="ddaattee" class="form-control" id="meeting" type="date"  name="firstdate"/>
            </div>

            <div class="form-group" style="margin-left: 20px;">
                <label for="aldult" style="color: #000">成人</label>
                <select class="form-control" id="aldult" style="width: 80px;" name="aldult">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>

            <div class="form-group" style="margin-left: 20px;">
                <label for="child" style="color: #000">儿童</label>
                <select class="form-control" id="child" style="width: 80px;" name="child">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div><br>

            <div>
                <button id="choose" class="button" style="vertical-align:middle" type="button">立刻查询</button>
            </div>
            <br><br>
        </form>

    </div>
</div>

<script>

    $(document).ready(function () {

        var datee = new Date();
        var year = datee.getFullYear();
        var month = ('0'+ (datee.getMonth() + 1)).slice(-2);
        var day = ('0' + datee.getDate()).slice(-2);
// var day = date.getDay();
        var time = year +'-'+ month +'-'+ day;
        console.log(time);
        //$('#time').value = time;
//限制不能选择今天之后的日期（加上属性max）
        $('#ddaattee').attr('min', time);

        let date = new Date();
        var dd = dateFormat("YYYY-mm-dd", date);
        console.log(dd);
        $("#ddaattee").attr("value",dd);

        var loginFlag=0;
        $.ajax({
            url: "/getName",
            type: "get",
            dataType: "json",
            success: function (data) {
                if (data.success){
                    loginFlag=1;
                    $("#namee").text(data.data);
                }else{
                    $("#namee").text("未登录");
                    $("#namee").click(function () {
                        location.href="login.html";
                    });
                }
            }
        })


        $("#choose").click(function () {
            var a = $.cookie("username");
            console.log(a);
            if(loginFlag===0) {
                location.href = "login.html";
            }
            else{
                var t = $("#takeoff option:selected").val();
                var l = $("#landing option:selected").val();
                if (t === l){
                    alert("不能选择相同城市");
                }else{
                    $("#ff").submit();
                }
            }
        })

        var pathName=window.document.location.pathname;
        var curWwwPath=window.document.location.href;
        var pos=curWwwPath.indexOf(pathName);
        var prefixUrl=curWwwPath.substring(0,pos);
        console.log("prefixUrl:"+prefixUrl);



        $("#signOutBtn").click(function () {
            signOut();
            return;//终止a标签默认行为
        });

        function signOut() {
            $.ajax({
                url:prefixUrl+"/signOut",
                type: "POST",
                success:function (data) {
                    location.href="login.html";
                }
            })
        }

        $.ajax({
            url: prefixUrl+"/city",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log("城市列表");
                console.log(data);

                for (var i = 0; i < data.length; i++) {
                    var id = data[i].id;
                    var name = data[i].name;
                    console.log(name );

                    var idTd = $("<option></option>").val(id).html(name).attr("name","id");
                    console.log(idTd);

                    $("#takeoff").append(idTd);

                }

                for (var i = 0; i < data.length; i++) {
                    var id = data[i].id;
                    var name = data[i].name;
                    console.log(name );

                    var idTd = $("<option></option>").val(id).html(name).attr("name","id");
                    console.log(idTd);
                    var a = idTd;

                    $("#landing").append(idTd);

                }
            }
        });

        function dateFormat(fmt, date) {
            let ret;
            const opt = {
                "Y+": date.getFullYear().toString(),        // 年
                "m+": (date.getMonth() + 1).toString(),     // 月
                "d+": date.getDate().toString(),            // 日
                "H+": date.getHours().toString(),           // 时
                "M+": date.getMinutes().toString(),         // 分
                "S+": date.getSeconds().toString()          // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                };
            };
            return fmt;
        }

    })

</script>

</body>
</html>